<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .fixed-table-body{
        height: calc(73vh);
    }

    .fixed-table-footer{
        border-top: 0;
    }
</style>
<body class="gray-bg">
<div class="container-div">
    <div  id="flexSearchBox"  class="collapse out col-sm-12 search-box">
        <form id="user-form">
            <div class="select-list">
                <ul>
                    <li>
                        internationalExpress：<select name="overseasExpressCompanyID" th:with="type=${@dict.getType('erp_overseas_courier')}">
                        <option value="">all</option>
                        <option th:each="e : ${type}" th:text="${e['dictLabel']}" th:value="${e['dictValue']}"></option>
                    </select>
                    </li>

                    <li>
                        internationalExpressNumber：<input class="reset" type="text" name="overseasExpressNo"/>
                    </li>
                    <li>
                        state：<select name="chinaReceived" th:with="type=${@dict.getType('erp_delivered_state')}">
                        <option value="">all</option>
                        <option th:each="e : ${type}" th:text="${e['dictLabel']}" th:value="${e['dictValue']}"></option>
                    </select>
                    </li>
                    <li class="time">
                        <label>deliveryTimeToOverseasWarehouse:</label>
                        <input type="text" id="startTime" class="time-input reset"  placeholder="start date" name="beginChinaReceiveDate"/>
                        <span>to</span>
                        <input type="text" id="endTime" class="time-input reset"  placeholder="end date" name="endChinaReceiveDate"/>
                    </li>
                    <li>
                        <a class="btn btn-success btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;search</a>
                        <a class="btn btn-primary btn-rounded btn-sm reset-booton"><i class="glyphicon glyphicon-repeat"></i>&nbsp;reset</a>
                    </li>
                </ul>
            </div>
        </form>
    </div>
    <div class="btn-group hidden-xs" id="toolbar" role="group">
        <a class="btn btn-outline btn-info btn-rounded flex-botton" data-toggle="collapse" data-target="#flexSearchBox">
            <i class="glyphicon glyphicon-chevron-down">unfoldSearch
            </i>
        </a>
    </div>

    <div class="col-sm-12 select-info table-responsive">
        <table id="bootstrap-table" class="table text-nowrap table-hover" data-height="770" data-mobile-responsive="true"></table>
    </div>
</div>
<div th:include="include :: footer"></div>
<script th:src="@{/ajax/libs/jquery-migrate/jQuery.print.min.js}"></script>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('module:purchases:edit_overseas')}]];
    var prefix = ctx + "module/purchases"
    var types2 = [[${@dict.getType('erp_overseas_courier')}]];
    var types_state = [[${@dict.getType('erp_delivered_state')}]];


    $(function () {
        var options = {
            url: prefix + "/list_received",
            updateUrl: prefix + "/edit_received/{overseasExpressNo}/{overseasExpressCompanyID}",
            modalName: "海外仓签收",
            showFooter:true,
            columns: [{
                checkbox: true
            },{
                field: 'id',
                align: 'center',
                title: 'id',
                visible: false
            },
                {
                    title: 'serialNumber',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var pageSize = $('#bootstrap-table').bootstrapTable('getOptions').pageSize;     //通过table的#id 得到每页多少条
                        var pageNumber = $('#bootstrap-table').bootstrapTable('getOptions').pageNumber; //通过table的#id 得到当前第几页
                        return pageSize * (pageNumber - 1) + index + 1;    // 返回每条的序号： 每页条数 *（当前页 - 1 ）+ 序号
                    },
                    footerFormatter: function (value) {
                        return 'total';
                    }
                },
                {
                    title: 'operation',
                    clickToSelect : false,
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-primary btn-xs ' + editFlag + '" href="#" onclick="overseas_received(\'' + "nobeach" + '\'' +',\''+ row.overseasExpressNo + '\'' + ',\'' + row.overseasExpressCompanyID + '\')"><i class="glyphicon glyphicon-pencil"></i>sign for</a> ');
                        return actions.join('');
                    }
                },
                {
                    field: 'overseasExpressCompanyID',
                    align: 'center',
                    sortable: true,
                    title: 'internationalExpress',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(types2, value);
                    }
                },
                {
                    field: 'overseasExpressNo',
                    align: 'center',
                    sortable: true,
                    clickToSelect : false,
                    title: '<span class="globalSearch_column">internationalExpressNumber</span>',
                    formatter: function (value, row, index) {
                        var href ="<a target=\"view_window\" href=\"http://m.kuaidi100.com/app/query/?nu="+value+"\">";
                        return href +value+'</a>';
                    }
                },
                {
                    field: 'chinaReceived',
                    align: 'center',
                    sortable: true,
                    title: 'state',
                    formatter: function (value, row, index) {
                        return $.table.selectDictLabel(types_state, value);
                    }
                },
                {
                    field: 'chinaReceiveBy',
                    align: 'center',
                    sortable: true,
                    title: 'shipper'
                },
                {
                    field: 'chinaReceiveDate',
                    align: 'center',
                    sortable: true,
                    title: 'deliveryTimeToOverseasWarehouse'
                },
                {
                    field: 'companyName',
                    align: 'center',
                    sortable: true,
                    title: 'company'
                }],
            onLoadSuccess: function (item, $element) {
                $('.fixed-table-footer').addClass("totalRowBackground-color");//合计行添加颜色
            },
        };
        $.table.init(options);
    });


    /*库存管理-海外仓签收功能*/
    function overseas_received (state,overseasExpressNo,overseasExpressCompanyID) {


            var url = $.table._option.updateUrl.replace("{overseasExpressNo}", overseasExpressNo)
                .replace("{overseasExpressCompanyID}", overseasExpressCompanyID);

        $.modal.open("海外仓签收" + $.table._option.modalName, url);
    }

    function refresh () {
        $('#bootstrap-table').bootstrapTable('refresh');
    }

</script>
</body>
</html>